<template>
	<view class="tabbar">
		<view v-for="(item, index) in list" :key="index" class="tabbar-item" @click="switchTab(index, item.pagePath)">
			<image v-if="role == 1" :src="current === index ? item.selectedIconPath : item.iconPath" />
			<image v-if="role == 2" :src="current === index ? item.selectedIconPaths : item.iconPath" />
			<view v-if="role==1" :class="{ 'active_student': current == index }">{{ item.text }}</view>
			<view v-if="role==2" :class="{ 'active_parent': current == index }">{{ item.text }}</view>
		</view>
	</view>
</template>

<script>
	export default {
		props: {
			current: {
				type: Number,
				default: 0
			}
		},
		data() {
			return {
				list: [{
						pagePath: "/pages/tabbar/home/home",
						text: "首页",
						iconPath: "/static/image/tabbar/home.png",
						selectedIconPath: "/static/image/tabbar/homes.png",
						selectedIconPaths: "/static/image/tabbar/homeg.png"
					}, {
						pagePath: "/pages/tabbar/course/course",
						text: "课程",
						iconPath: "/static/image/tabbar/kc.png",
						selectedIconPath: "/static/image/tabbar/kcs.png",
						selectedIconPaths: "/static/image/tabbar/kcg.png"
					},
					{
						pagePath: "/pages/tabbar/mine/mine",
						text: "我的",
						iconPath: "/static/image/tabbar/mine.png",
						selectedIconPath: "/static/image/tabbar/mines.png",
						selectedIconPaths: "/static/image/tabbar/mineg.png"
					}
				],
				role: 1,
			};
		},
		onLoad() {

		},
		created() {
			this.role = uni.getStorageSync('role')
			uni.$on('changeTabsRole', () => {
				this.role = uni.getStorageSync('role')
				console.log("changeTabsRole")
			})
			// console.log("this.role", this.role)
		},
		methods: {
			switchTab(index, path) {
				if (this.current === index) return;
				uni.switchTab({
					url: path
				}); // 微信小程序专用API
			}
		}
	};
</script>

<style>
	.tabbar {
		position: fixed;
		bottom: 0;
		width: 100%;
		height: 100rpx;
		display: flex;
		background: white;
		padding-bottom: 40rpx;
		box-shadow: 8rpx 0rpx 12rpx 0rpx rgba(47, 47, 47, 0.05);
		z-index: 9999;
	}

	.tabbar-item {
		flex: 1;
		text-align: center;
		padding: 8rpx 0;
		font-weight: 400;
		font-size: 20rpx;
		color: #9C9C9C;
	}

	.tabbar-item image {
		width: 48rpx;
		height: 48rpx;
	}

	.active_student {
		color: #FFA515;
	}

	.active_parent {
		color: #16B650;
	}
</style>